<template>
	<view class="">
		<view class="bigbox">
			<view class="smallbox" v-for="(item,index) in listarr" :key="index" @click="tiaozhuan(item)">
				<image :src="item.img" mode=""></image>
				<view class="cont">
					{{item.name}}
				</view>
				<view class="btnbox">
					<view class="leftbox" v-if="item.prices">
						<text>￥</text>
						{{item.prices}}
					</view>
					<view class="leftboxs" v-if="item.integral">
						{{item.integral}}
						<text>积分</text>
					</view>
					<view class="rigbox" v-if="item.sale_num">
						销量：{{item.sale_num}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			listarr: {
				type: Array,
				default: [],
			}
		},
		methods: {
			tiaozhuan(e) {
				this.$emit('tiaozhuan', e)
			}
		}
	}
</script>

<style scoped lang="scss">
	.bigbox {
		display: flex;
		margin-left: 28rpx;
		flex-wrap: wrap;

		.smallbox {
			background-color: #FFFFFF;
			margin-right: 28rpx;
			margin-bottom: 55rpx;
			padding: 10rpx;
			box-sizing: border-box;
			border-radius: 6rpx;

			image {
				width: 310rpx;
				height: 310rpx;
				border: solid 1rpx #e7e7e7;
			}

			.cont {
				width: 310rpx;
				font-family: SourceHanSansCN-Regular;
				font-size: 26rpx;
				line-height: 36rpx;
				color: #000000;
				margin-top: 8rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.btnbox {
				width: 310rpx;
				margin-top: 32rpx;
				display: flex;
				justify-content: space-between;

				.leftbox {
					font-family: PingFang-SC-Heavy;
					font-size: 30rpx;
					color: #e13c35;
					font-weight: 700;

					text {
						font-size: 18rpx;
					}
				}

				.leftboxs {
					font-family: PingFang-SC-Heavy;
					font-size: 30rpx;
					color: #e13c35;
					font-weight: 700;

					text {
						margin-left: 10rpx;
						font-size: 18rpx;
						color: #838383;
					}
				}

				.rigbox {
					font-family: PingFang-SC-Medium;
					font-size: 18rpx;
					color: #838383;
				}
			}
		}
	}
</style>
